{% load static %}

{% load wagtailcore_tags wagtailimages_tags %}

<!DOCTYPE html>
<html lang="zh_cn">
    <head>
        <meta charset="utf-8" />
        <title>
            {% block title %}
                {% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
            {% endblock %}
            {% block title_suffix %}
                {% with self.get_site.site_name as site_name %}
                    {% if site_name %}- {{ site_name }}{% endif %}
                {% endwith %}
            {% endblock %}
        </title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="icon" type="image/png" sizes="32x32" href="{% static 'media/slowread-32x32.ico' %}">
        <link rel="icon" type="image/png" sizes="16x16" href="{% static 'media/slowread-16x16.ico' %}">

        {# Global stylesheets #}
        <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
        <link href="{% static 'css/all.min.css' %}" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="{% static 'css/slowread.css' %}">

    </head>

    <body class="{% block body_class %}{% endblock %}">

        <div class="container-fluid">
            <div class="row">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                    <div class="carousel-inner">

                        {% for wallpaper in wallpapers %}

                            {% image wallpaper original as wallpaper_original %}

                            <div {% if forloop.first %} class="carousel-item active"{% else %} class="carousel-item"{% endif %}>
                                <img class="d-block w-100" src="{{ wallpaper_original.url }}">
                            </div>
                        {% empty %}
                            No Wallpaper found.
                        {% endfor %}

                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>

    {# Global javascript #}
    <script type="text/javascript" src="{% static 'js/slowread.js' %}"></script>
    <script src="{% static 'js/jquery-3.3.1.slim.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/popper.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>

    {% block extra_js %}
        {# Override this in templates to add extra javascript #}
    {% endblock %}
    </body>
</html>